<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-button type="primary" @click="handleAdd" style="width:120px;">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="background: #13ce66" v-on:click="_reload">刷新</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="actives" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;" class="main_table">
      <el-table-column prop="title" label="标题"  sortable>
      </el-table-column>
      <el-table-column label="活动图片" >
        <template slot-scope="scope">
          <div class="banner" v-if="scope.row.pic">
            <a :href="scope.row.pic" target="_blank"><img :src="scope.row.pic" :alt="scope.row.title" :index="scope.$index"></a>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="详情图片" >
        <template slot-scope="scope">
          <div class="banner" style="width: 230px;height: 120px" v-if="scope.row.detail_pic">
            <a :href="scope.row.detail_pic" target="_blank"><img :src="scope.row.detail_pic" :alt="scope.row.title" :index="scope.$index"></a>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="跳转链接" >
        <template slot-scope="scope">
          <p v-if="scope.row.jump_to"><a :href="scope.row.jump_to">{{ scope.row.jump_to }}</a></p>
        </template>
      </el-table-column>
      <el-table-column label="操作" style="text-align:right;">
        <template slot-scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
          <el-button type="warning" size="small" @click="handleMove(scope.$index, scope.row)">向上</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--编辑界面-->
    <el-dialog title="编辑首页活动" v-model="editFormVisible" :close-on-click-modal="false">
      <el-form :model="editForm" label-width="80px" :rules="editFormRules" ref="editForm">
        <el-form-item label="标题" prop="name">
          <el-input v-model="editForm.title" auto-complete="off"></el-input>
          <el-input v-model="editForm.id" auto-complete="off" type="hidden"></el-input>
        </el-form-item>
        <el-form-item label="活动图片">
          <div class="p-pic">
            <div class="p-pic-old">
              <el-form-item>
                <el-input type="text" v-model="editForm.pic" auto-complete="off" width="80px" readonly></el-input>
              </el-form-item>
            </div>
            <div class="p-pic-upload">
              <el-button type="success">上传<i class="el-icon-upload el-icon--right"></i></el-button>
              <span class="upload_plant_pic"><input type="file" name="file" class="cfg_upload_pic" @change="upInputOnchange"></span>
            </div>
            <div class="p-poster">
              <el-form-item label="">
                <img :src="editForm.pic" alt="">
              </el-form-item>
            </div>
          </div>
        </el-form-item>
         <el-form-item label="详情图片">
	        <template>
	          <div class="p-listPic-upload">
	            <el-upload drag action="/index.php?c=plant&a=uploadDetailPic" multiple :on-success="uploadEditSuccess">
	              <i class="el-icon-upload"></i>
	              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
	              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过5000kb</div>
	            </el-upload>
	          </div>
	         <div style="background: #ffffff;overflow: hidden;margin-top: 20px" v-if="editForm.detail_pic">
	            <img v-if="editForm.detail_pic" :src="editForm.detail_pic" style="width: 120px;height: 80px;margin-right: 5px;" />
	        </div>
	      	</template>
	      </el-form-item>
        <el-form-item label="跳转链接">
          <el-input type="text" v-model="editForm.jump_to" auto-complete="off" width="80px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="editFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
      </div>
    </el-dialog>

    <!--新增界面-->
    <el-dialog title="新增首页活动" v-model="addFormVisible" :close-on-click-modal="false">
      <el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
        <el-form-item label="标题" prop="name">
          <el-input v-model="addForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动图片">
          <div class="p-pic">
            <div class="p-pic-old">
              <el-form-item>
                <el-input type="text" v-model="addForm.pic" auto-complete="off" width="80px" readonly></el-input>
              </el-form-item>
            </div>
            <div class="p-pic-upload">
              <el-button type="success">上传<i class="el-icon-upload el-icon--right"></i></el-button>
              <span class="upload_plant_pic"><input type="file" name="file" class="cfg_upload_pic" @change="upInputOnchange"></span>
            </div>
            <div class="p-poster"  v-if="addForm.pic">
              <el-form-item>
                <img :src="addForm.pic" alt="">
              </el-form-item>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="详情图片">
	        <template>
	          <div class="p-listPic-upload">
	            <el-upload drag action="/index.php?c=plant&a=uploadDetailPic" multiple :on-success="uploadSuccess">
	              <i class="el-icon-upload"></i>
	              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
	              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过5000kb</div>
	            </el-upload>
	          </div>
	         <div style="background: #ffffff;overflow: hidden;margin-top: 20px" v-if="addForm.detail_pic">
	            <img v-if="addForm.detail_pic" :src="addForm.detail_pic" style="width: 120px;height: 80px;margin-right: 5px;" />
	        </div>
	      	</template>
	      </el-form-item>
        <el-form-item label="跳转链接">
          <el-input type="text" v-model="addForm.jump_to" auto-complete="off" width="80px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click.native="addFormVisible = false">取消</el-button>
        <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
      </div>
    </el-dialog>

  </section>
</template>

<!-- <script type="text/ecmascript-6"> -->
<script>
  import util from '../../util'
  import NProgress from 'nprogress'
	import { apiTree } from '../../apiTree'
  export default {
    data() {
      return {
        filters: {
          name: ''
        },
        actives: [],
        total: 0,
        page: 1,
        listLoading: false,
        sels: [], // 列表选中列
        editFormVisible: false, // 编辑界面是否显示
        editLoading: false,
        editFormRules: {
          title: [
            {required: true, message: '请输入标题', trigger: 'blur'}
          ]
        },
        // 编辑界面数据
        editForm: {},
        // 新增界面是否显示
        addFormVisible: false,
        addLoading: false,
        addFormRules: {
          title: [
            {required: true, message: '请输入标题', trigger: 'blur'}
          ]
        },
        // 新增界面数据
        addForm: {
          title: '',
          pic: '',
          detail_pic: '',
          jump_to: ''
        }
      }
    },
    methods: {
	    uploadSuccess(res, _file) {
        if (res.s === 1) {
          let _name = _file.name
          this.addForm.detail_pic = res.d.url
        }
	    },
	    uploadEditSuccess(res, _file) {
	    	if (res.s === 1) {
          let _name = _file.name
          this.editForm.detail_pic = res.d.url
        }
	    },
    	//向上移动
      handleMove: function (index, row){
      	let para = {'id': index}
      	if (index > 0) {
      		var list = new Array();
      		list = this.actives[index];
      		this.actives[index] = this.actives[index-1];
      		this.actives[index-1] = list;
      		this.setConfig();
      	}
      },
      // 获取用户列表
      getindexactive() {
        this.listLoading = true
        NProgress.start()
        apiTree('downLine/index', 'advert/indexactive').then((res) => {
          this.actives = res.d.data
          this.listLoading = false
          NProgress.done()
        })
      },
      upInputOnchange(e) {
        var _that = this
        let file = e.target.files[0]
        let _reader = new FileReader()
        _reader.readAsDataURL(file)
        _reader.onload = function() {
          let _file = this.result
          let param = {'file': _file, 'type': 3}
          apiTree('upload/index', 'plant/upload', param, 'POST').then((res) => {
            if (res.s === 1) {
              if (_that.addFormVisible) {
                _that.addForm.pic = res.d.url
              }
              if (_that.editFormVisible) {
                _that.editForm.pic = res.d.url
              }
            }
          })
        }
      },
      // 删除
      handleDel: function (index, row) {
        this.$confirm('确认删除该记录吗?', '提示', {
          type: 'warning'
        }).then(() => {
          this.listLoading = true
          this.actives.splice(index, 1)
          this.setConfig()
        }).catch(() => {

        })
      },
      // 显示编辑界面
      handleEdit: function (index, row) {
        this.editFormVisible = true
        this.editForm = Object.assign({}, row)
        this.editForm.id = index
      },
      // 显示新增界面
      handleAdd: function () {
        this.addFormVisible = true
        this.addForm = {
          title: '',
          pic: '',
          detail_pic: '',
          jump_to: ''
        }
      },
      // 编辑后的内容提交
      editSubmit: function () {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              if (util.isEmpty(this.editForm.title)) {
                this.$message.error('标题为空！')
                return
              }
              if (util.isEmpty(this.editForm.pic) || !util.isHttp(this.editForm.pic)) {
                this.$message.error('图片格式错误！')
                return
              }
              if (util.isEmpty(this.editForm.detail_pic) || !util.isHttp(this.editForm.detail_pic)) {
                this.$message.error('图片格式错误！')
                return
              }
              if (util.isEmpty(this.editForm.jump_to) || !util.isHttp(this.editForm.jump_to)) {
                this.$message.error('跳转地址格式错误！')
                return
              }
              this.editLoading = true
              var id = this.editForm.id
              delete this.editForm.id
              this.actives[id] = this.editForm
              this.setConfig()
              this.$refs['editForm'].resetFields()
              this.editFormVisible = false
              this.editLoading = false
            })
          }
        })
      },
      // 新增
      addSubmit: function () {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              if (util.isEmpty(this.addForm.title)) {
                this.$message.error('标题为空！')
                return
              }
              if (util.isEmpty(this.addForm.pic) || !util.isHttp(this.addForm.pic)) {
                this.$message.error('图片格式错误！')
                return
              }
              if (util.isEmpty(this.addForm.detail_pic) || !util.isHttp(this.addForm.detail_pic)) {
                this.$message.error('图片格式错误！')
                return
              }
              if (util.isEmpty(this.addForm.jump_to) || !util.isHttp(this.addForm.jump_to)) {
                this.$message.error('跳转地址格式错误！')
                return
              }
              this.addLoading = true
              this.actives.push(this.addForm)
              this.setConfig()
              this.$refs['addForm'].resetFields()
              this.addFormVisible = false
              this.addLoading = false
            })
          }
        })
      },
      _reload() {
        this.getindexactive()
      },
      selsChange: function (sels) {
        this.sels = sels
      },
      setConfig: function() {
        this.actives.forEach((item) => {
          for (let i in item) {
            item[i] = util.trim(item[i]);
          }
        });
        apiTree('downLine/index', 'advert/setindexactive',{'data': JSON.stringify(this.actives)}, 'POST').then((res) => {
          if (res.s === 1) {
            this.$message({
              message: '命令执行完毕',
              type: 'success'
            })
            this.getindexactive();
          } else {
            this.$alert('出问题了');
          }
        })
      }
    },
    mounted() {
      this.getindexactive()
    }
  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .banner
    width: 150px
    height: 105px
    padding: 20px
  .p-pic
    .p-pic-old
      display inline-block
      width 500px
    .p-pic-upload
      display inline-block
      margin-left 10px
      position relative
    .upload_plant_pic
      display block
      width 80px
      height 35px
      cursor pointer
      position absolute
      top 0px
      left 0px
      opacity 0
      & input[type=file]
        display block
        cursor pointer
        width 80px
        height 35px
    .p-poster
      width 220px
      height 100px
      margin 20px
      & img
        width 200px
        height 100px
  .el-dialog--small {
    width: 38%;
  }
</style>
